<template>
  <div>
    <pageHeader title="商品信息" back></pageHeader>
    <pageMain padding="0" background="transparent" v-loading="pageLoading">
      <!-- banner图 -->
      <chunkTitle title="商品图" draggable="sh">
        <template>
          <div class="goods-banner-list">
            <div
              class="goods-banner-list-li"
              v-for="(ban, index) in goodsInfo.banner"
              :key="index"
            >
              <div class="goods-banner-box">
                <p class="goods-banner-tips" v-if="index == 0">商品主图</p>
                <img
                  class="goods-banner-list-li-img"
                  :src="ban.image"
                  alt=""
                  @click="previewImage(ban.image)"
                />
                <div class="goods-banner-options">
                  <div
                    title="向左移动"
                    class="options-li left-arrow"
                    v-if="index != 0"
                  >
                    <i
                      class="overall-icon options-li-icon icon-jiantou_xiangzuo"
                    ></i>
                  </div>
                  <div
                    title="替换"
                    class="options-li replace-arrow"
                    @click="clickBannerReplaceBanner(ban.id)"
                  >
                    <i class="overall-icon options-li-icon icon-qiehuan2"></i>
                  </div>
                  <div
                    title="删除"
                    class="options-li center-arrow"
                    @click="clickBannerRemove(ban.id)"
                  >
                    <i class="overall-icon options-li-icon icon-shanchu"></i>
                  </div>
                  <div
                    title="向右移动"
                    class="options-li right-arrow"
                    v-if="index != goodsInfo.banner.length - 1"
                  >
                    <i
                      class="overall-icon options-li-icon icon-jiantou_xiangyou"
                    ></i>
                  </div>
                </div>
              </div>

              <p class="goods-list-li-title">
                {{ ban.main ? "主图" : "图集" }}
              </p>
            </div>
            <div
              class="goods-banner-list-li goods-banner-list-li-append-button"
            >
              <input
                type="file"
                :accept="inputaccept"
                class="upload-file-input"
                @change="uploadBanner"
              />

              <i
                class="overall-icon icon-yunshangchuan_o append-button-title-icon"
              ></i>
              <p class="append-button-title">上传图片</p>
            </div>
          </div>
        </template>
      </chunkTitle>
      <!-- 基本信息 -->
      <chunkTitle title="基本信息">
        <template>
          <el-form
            ref="form"
            :model="goodsInfo"
            label-width="80px"
            label-position="left"
          >
            <el-form-item label="店铺">
              <span>{{ goodsInfo.store_name }}</span>
            </el-form-item>

            <el-form-item label="所属类目">
              <el-row :gutter="20">
                <el-col :span="6"
                  ><el-select
                    v-model="goodsInfo.type.one"
                    placeholder="一级类目"
                    filterable
                  >
                    <el-option
                      v-for="(option, index) in ontTypeList"
                      :label="option.name"
                      :key="index"
                      :value="option.id"
                    ></el-option> </el-select
                ></el-col>
                <el-col :span="6"
                  ><el-select
                    v-if="twoTypeList.length"
                    v-model="goodsInfo.type.two"
                    placeholder="二级类目"
                    filterable
                  >
                    <el-option
                      v-for="(option, index) in twoTypeList"
                      :label="option.name"
                      :key="index"
                      :value="option.id"
                    ></el-option> </el-select
                ></el-col>
                <el-col :span="6"
                  ><el-select
                    v-if="threeTypeList.length"
                    v-model="goodsInfo.type.three"
                    placeholder="三级类目"
                    filterable
                  >
                    <el-option
                      v-for="(option, index) in threeTypeList"
                      :label="option.name"
                      :key="index"
                      :value="option.id"
                    ></el-option> </el-select
                ></el-col>
              </el-row>
            </el-form-item>

            <el-form-item label="商品标题">
              <el-input v-model="goodsInfo.title"></el-input>
            </el-form-item>

            <el-form-item label="关键词">
              <el-input v-model="goodsInfo.price"></el-input>
            </el-form-item>

            <el-form-item label="一口价">
              <el-input
                v-model="goodsInfo.price"
                style="width: 140px"
              ></el-input>
            </el-form-item>

            <el-form-item label="重量">
              <el-input
                v-model="goodsInfo.weight"
                style="width: 140px"
              ></el-input>
            </el-form-item>

            <el-form-item label="销售模式">
              <span>{{
                $dictionary.extend("GOODS_SALE_TYPE", goodsInfo.sale_mode)
              }}</span>
            </el-form-item>

            <el-form-item label="预售时间">
              <span>{{ goodsInfo.presale_start_date }}</span>
            </el-form-item>
          </el-form>
        </template>
      </chunkTitle>

      <chunkTitle title="商品属性">
        <template v-if="goodsInfo.spu.length">
          <el-table
            :data="goodsInfo.spu"
            style="width: 100%"
            :show-header="false"
          >
            <el-table-column prop="key" width="180"> </el-table-column>
            <el-table-column prop="value"> </el-table-column>
          </el-table>
        </template>

        <template v-else>
          <el-empty description="无商品属性"></el-empty>
        </template>
      </chunkTitle>

      <!-- 销售规格 -->
      <chunkTitle title="销售规格">
        <template v-if="goodsInfo.specs.length">
          <div
            class="specs-group"
            v-for="(spg, index) in goodsInfo.specs"
            :key="index"
          >
            <div class="specs-group-info">{{ spg.name }}</div>
            <ul class="specs-group-list">
              <el-tag
                v-for="(spc, index) in spg.specslist"
                :key="index"
                closable
              >
                {{ spc.value }}
              </el-tag>
              <el-input
                class="input-new-tag"
                v-model="inputValue"
                ref="saveTagInput"
                size="small"
                @keyup.enter.native="handleInputConfirm"
                @blur="handleInputConfirm"
              ></el-input>
              <el-button class="button-new-tag" size="small" @click="showInput"
                >添加新属性</el-button
              >
            </ul>
          </div>
        </template>

        <template v-else>
          <el-result
            icon="error"
            title="无销售规格"
            subTitle="请根据提示进行操作"
          >
            <template slot="extra">
              <el-button type="primary" size="medium">添加销售规格</el-button>
            </template>
          </el-result>
        </template>
      </chunkTitle>
      <!-- SKU -->
      <chunkTitle title="SKU">
        <template v-if="goodsInfo.sku.length">
          <el-table :data="goodsInfo.sku" style="width: 100%">
            <el-table-column prop="date" label="SKU图片" width="80">
              <template slot-scope="scope">
                <img
                  width="40px"
                  height="40px"
                  :src="scope.row.img"
                  alt=""
                  @click="previewImage(scope.row.img)"
                />
              </template>
            </el-table-column>
            <el-table-column prop="date" label="销售名称">
              <template slot-scope="scope">
                <span>{{ scope.row.name }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="name" label="价格" width="160">
              <template slot-scope="scope">
                <el-input type="number" v-model="scope.row.price"></el-input>
              </template>
            </el-table-column>
            <el-table-column prop="address" label="库存" width="160">
              <template slot-scope="scope">
                <el-input :value="scope.row.stock"></el-input>
              </template>
            </el-table-column>
            <el-table-column prop="address" label="重量" width="160">
              <template slot-scope="scope">
                <el-input :value="scope.row.code"></el-input>
              </template>
            </el-table-column>
            <el-table-column prop="address" label="货号" width="160">
              <template slot-scope="scope">
                <el-input :value="scope.row.code"></el-input>
              </template>
            </el-table-column>
          </el-table>
        </template>

        <template v-else>
          <el-empty description="无SKU"></el-empty>
        </template>
      </chunkTitle>

      <!-- 测评信息 -->
      <chunkTitle title="测评信息"></chunkTitle>

      <!-- 审核 -->
      <chunkTitle title="审核">
        <template>
          <el-result
            icon="success"
            title="商品已经通过审核"
            subTitle="审核时间：2023年8月7日23:24:17"
          >
          </el-result>
        </template>
      </chunkTitle>
      <!-- 详情 -->
      <chunkTitle title="详情"> 三点几 </chunkTitle>
    </pageMain>
  </div>
</template>

<script>
import pageHeader from "~/page-header/page-header.vue";
import pageMain from "~/page-main/page-main.vue";
import ShoppingAPI from "@/api/shopping";
import PreviewMixin from "@/mixins/preview";
export default {
  mixins: [PreviewMixin],
  computed: {
    ontTypeList() {
      let list = this.shoppingTypeList;
      return list;
    },
    twoTypeList() {
      let list = [];
      if (this.goodsInfo.type.one) {
        let oneTypeId = this.goodsInfo.type.one;
        let find = this.ontTypeList.find((i) => i.id == oneTypeId);
        if (find) {
          list = find?.children ?? [];
        } else {
          list = [];
        }
      } else {
        list = [];
      }

      return list;
    },
    threeTypeList() {
      let list = this.twoTypeList;
      if (list.length) {
        let twoTypeId = this.goodsInfo.type.two;
        let find = list.find((i) => i.id == twoTypeId);
        if (find) {
          list = find?.children ?? [];
        } else {
          list = [];
        }
      }
      return list;
    },
  },

  data() {
    return {
      pageLoading: true,
      goods: null,
      goodsInfo: {
        type: {
          one: 18,
          two: 19,
          three: 20,
        },
      },
      inputaccept: "image/jpeg,image/png,image/jpeg,image/jpeg",
      shoppingTypeList: [],
    };
  },

  mounted() {
    let { goods } = this.$route.query;
    this.goods = goods;

    this.$nextTick(() => {
      this.getGoodsInfo();
      this.getShoppingTypeList();
    });
  },

  methods: {
    // 获取商品类目
    getShoppingTypeList() {
      ShoppingAPI.shoppingTypeList()
        .then((res) => {
          let data = res.data;
          console.log(data);

          this.$nextTick(() => {
            this.shoppingTypeList = data;
          });
        })
        .catch((err) => {
          console.log(err);
        });
    },

    handleBannerData(image) {
      let length = this.goodsInfo.banner.length;
      let id = length++;
      return {
        id,
        image,
        main: false,
        create_date: Date.now(),
      };
    },
    // 追加Banner
    appendBanner(image) {
      let length = this.goodsInfo.banner.length;
      let id = length++;
      let data = {
        id,
        image,
        main: false,
        create_date: Date.now(),
      };
      this.goodsInfo.banner.push(data);
    },
    // 删除指定id的banner
    removeBanner(id) {
      let foIndex = this.goodsInfo.banner.findIndex((item) => item.id == id);
      this.goodsInfo.banner.splice(foIndex, 1);
    },
    // 更换指定id的image
    updateBanner(id, image) {
      let foIndex = this.goodsInfo.banner.findIndex((item) => item.id == id);
      this.goodsInfo.banner[foIndex].image = image;
    },

    // 点击banner图片删除按钮
    clickBannerRemove(id) {
      this.$confirm("确定要删除吗", "确认信息", {
        distinguishCancelAndClose: true,
        confirmButtonText: "确定",
        cancelButtonText: "取消",
      }).then(() => {
        this.removeBanner(id);
      });
    },
    // 点击Banner图片替换按钮
    clickBannerReplaceBanner(id) {
      console.log(id);
    },

    uploadBanner(e) {
      let target = e.target;
      let files = target.files;
      let file = files[0];
      let teskUrl = URL.createObjectURL(file);
      this.appendBanner(teskUrl);
    },
    getGoodsInfo() {
      ShoppingAPI.info({
        id: this.goods,
      })
        .then((res) => {
          let data = res.data;

          this.$nextTick(() => {
            this.goodsInfo = data;
            this.pageLoading = false;
          });
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
};
</script>

<style lang="scss">
$liWidth: 130px;
$liGap: 20px;

.specs-group {
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #c3c3c344;
  padding-bottom: 20px;
}
.specs-group-info {
  font-size: 16px;
  margin-right: 25px;
}
.specs-group-list {
  flex: 1;
  display: flex;
  gap: 15px;
  align-items: center;
  flex-wrap: wrap;
}
.specs-group-list-li {
  padding: 8px 14px;
  border: 1px solid #c3c3c3;
}

.goods-banner-list {
  display: flex;
  flex-wrap: wrap;
  gap: $liGap;
}
.goods-banner-list-li {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: $liWidth;
  position: relative;
}

.goods-banner-box {
  width: $liWidth;
  height: $liWidth;
  border-radius: 10px;
  overflow: hidden;
  position: relative;

  // banner提示高度
  $tipsHeight: 26px;
  // banner操作栏高度
  $optionsHeight: 30px;

  &:hover .goods-banner-tips {
    top: -$tipsHeight;
  }
  &:hover .goods-banner-options {
    bottom: 0px;
  }

  .goods-banner-tips,
  .goods-banner-options {
    position: absolute;
    left: 0px;
    width: 100%;
    color: white;
    transition: all 180ms linear;
  }
  .goods-banner-tips {
    top: 0px;
    height: $tipsHeight;
    line-height: $tipsHeight;
    background: rgba(0, 0, 0, 0.638);
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    text-align: center;
  }
  .goods-banner-options {
    bottom: -$optionsHeight;
    left: 0px;
    height: $optionsHeight;
    line-height: $optionsHeight;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(10, 88, 223, 0.856);

    .right-arrow,
    .left-arrow {
      font-size: 18px;
    }

    .options-li-icon {
      font-size: 14px;
    }
    .options-li:hover {
      color: orangered;
    }

    .options-li {
      color: white;
      flex: 1;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }

  .goods-banner-list-li-img {
    width: 100%;
    height: 100%;
  }
}
.goods-list-li-title {
  display: none;
  margin-top: 10px;
  text-align: center;
  font-size: 14px;
  letter-spacing: 1px;
}

.goods-banner-list-li-append-button {
  background: #000;
  width: $liWidth;
  height: $liWidth;
  border: 3px dashed #c3c3c3;
  color: #c3c3c3;
  border-radius: 6px;
  background: white;
  box-sizing: border-box;
  transition: all 200ms linear;
  position: relative;
}
.goods-banner-list-li-append-button:hover {
  border-color: #908a8a;
  color: #908a8a;
}

.append-button-title-icon,
.append-button-title {
  font-size: 16px;
  text-align: center;
}

.upload-file-input {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0px;
  left: 0px;
  opacity: 0;
}

.append-button-title {
  text-align: center;
}
.append-button-title-icon {
  font-size: 26px;
  margin-bottom: 10px;
}

.input-new-tag {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}
.button-new-tag {
  margin-left: 10px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}
</style>
